<template>
  <div>
    <ul class="radioStationBox">
      <router-link
        tag="li"
        :to="{ name: 'radiostation', query: { id: item.id } }"
        v-for="item in data"
        :key="item.id"
        class="radioStationItem"
        :class="$route.query.id == item.id ? 'radioStationItemTe' : ''"
      >
        <div
          class="imgBox"
          :style="'background-image: url(' + item.picWebUrl + ');'"
        ></div>
        <span class="itemName">{{ item.name }}</span>
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {
props: {
  data: {
    type: Array,
    default: []
  },
},
};
</script>

<style lang="scss" scoped>
.radioStationBox {
  display: flex;
  flex-wrap: wrap;
  .radioStationItem {
    margin: 0 12px 25px 12px;
    cursor: pointer;
    color: #888;
    width: 70px;
    height: 70px;
    background-image: url("./../../assets/imges/djTypeBg.png");
    background-repeat: no-repeat;
    text-align: center;
    background-position: 0 9999px;
    &:hover {
      background-position: 0 0;
    }
    .imgBox {
      width: 48px;
      height: 48px;
      margin: 2px auto 0;
      background-position: 0 0;
    }
    .itemName {
      margin-top: -3px;
    }
  }
  .radioStationItemTe {
    background-position: -70px 0;
    color: #d35757;
    .imgBox {
      background-position: -48px 0;
    }
    &:hover {
      background-position: -70px 0;
    }
  }
}
</style>